@charset "UTF-8";
@import "common/common";
//猜歌开始页面
.page_music {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    //老歌页面开始
    .old_music {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/music/classics_background.png) no-repeat;
        background-size: 100% 100%;
        .old_man {
            position: absolute;
            top: r(75px);
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(550px);
            height: r(700px);
            z-index: 2;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .light {
            position: absolute;
            top: 0;
            right: 0;
            width: r(300px);
            height: r(140px);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .flower {
            position: absolute;
            top: 38%;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(700px);
            height: r(280px);
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    //音乐选项操作开始
    .music_order {
        position: absolute;
        bottom: r(100px);
        left: 0;
        right: 0;
        margin: 0 auto;
        width: r(660px);
        height: r(300px);
        z-index: 2;
        //选项
        .item {
            width: r(500px);
            height: r(110px);
            line-height: r(55px);
            margin-bottom: r(20px);
            padding-left: 10%;
            
            button {
                width: 100%;
                height: 100%;
                background: none;
                outline: none;               
                text-align: center;
                font-size: r(30px);
                font-weight: bold;
                
                letter-spacing: 4px;
                word-spacing: 4px;
            }
        }
        .item_a {
            background: url(../img/music/optionA.png) no-repeat left;
            background-size: 100% 100%;
        }
        .item_b {
            background: url(../img/music/optionB.png) no-repeat left;
            background-size: 100% 100%;
        }
        .item_c {
            background: url(../img/music/optionC.png) no-repeat left;
            background-size: 100% 100%;
        }
        //游戏时间
        .music_time {
            position: absolute;
            right: r(-10px);
            top: r(-30px);
            width: r(135px);
            height: r(140px);
            background: url(../img/music/time.png) no-repeat;
            background-size: 100% 100%;
            text-align: center;
            line-height: r(140px);
            font-size: r(30px);
        }
        //下一首歌
        .next_music {
            position: absolute;
            top: 40%;
            right: 0;
            width: r(88px);
            height: r(230px);
            line-height: r(32px);
            text-align: center;
            font-size: r(30px);
            font-weight: bold;
            background: url(../img/music/next_music.png) no-repeat;
            background-size: 100% 100%;
        }
    }
    //流行歌曲页面
    .popular_music {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        background: url(../img/music/fashion_background.png) no-repeat center;
        background-size: 100% 100%;
        .woman_talk {
            position: absolute;
            top: r(55px);
            left: r(10px);
            width: r(440px);
            height: r(280px);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .flower_man {
            position: absolute;
            left: r(40px);
            top: r(360px);
            width: r(600px);
            height: r(380px);
            z-index: 2;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .beach_woman {
            position: absolute;
            right: 0;
            top: r(150px);
            width: r(400px);
            height: r(580px);
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    //摇滚音乐开始
    .rock_music {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        background: url(../img/bg.jpg) no-repeat center;
        background-size: 100% 100%;
        .light {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(560px);
            height: r(200px);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .diban {
            position: absolute;
            top: 52%;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 100%;
            height: r(160px);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .singer {
            position: absolute;
            top: 18%;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(450px);
            height: r(580px);
            z-index: 2;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .audience_left {
            position: absolute;
            left: 0;
            top: 36%;
            width: r(330px);
            height: r(340px);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .audience_right {
            position: absolute;
            right: 0;
            top: 36%;
            width: r(330px);
            height: r(340px);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .audlf_talk {
            position: absolute;
            left: 0;
            top: 26%;
            width: r(210px);
            height: r(180px);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .audrg_talk {
            position: absolute;
            right: 0;
            top: 24%;
            width: r(240px);
            height: r(200px);
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    //电影金曲开始
    .movie_music {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        background: url(../img/music/classics_background.png) no-repeat;
        background-size: 100% 100%;
        .man_woman {
            position: absolute;
            top: 20%;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(740px);
            height: r(535px);
            z-index: 2;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .wall {
            position: absolute;
            top: 54%;
            left: 0;
            width: 100%;
            height: r(100px);
            z-index: 2;
            img {
                width: 100%;
            }
        }
        .zixia_talk {
            position: absolute;
            top: 10%;
            left: r(5px);
            width: r(650px);
            height: r(220px);
            img {
                width: 100%;
            }
        }
    }
    //经典音乐开始
    .classic_music {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        background: url(../img/music/classics_background.png) no-repeat;
        background-size: 100% 100%;
        .light {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(560px);
            height: r(200px);
            z-index: 3;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .grid {
            position: absolute;
            top: 42%;
            left: 0;
            width: 100%;
            img {
                width: 100%;
            }
        }
        .people {
            position: absolute;
            top: r(70px);
            left: 0;
            width: 100%;
            padding-left: r(10px);
            img {
                width: 95%;
            }
        }
        .soap_man {
            position: absolute;
            top: r(80px);
            left: r(80px);
            width: 76%;
            z-index: 2;
            img {
                width: 100%;
            }
        }
        .baffle_left {
            position: absolute;
            top: r(250px);
            left: 0;
            width: r(400px);
            img {
                width: 100%;
            }
        }
        .baffle_right {
            position: absolute;
            top: r(330px);
            right: 0;
            width: r(400px);
            z-index: 3;
            img {
                width: 100%;
            }
        }
    }
    //车载音乐开始
    .car_music {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        background: url(../img/music/classics_background.png) no-repeat;
        background-size: 100% 105%;
        .light {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(560px);
            height: r(200px);
            z-index: 3;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .car {
            position: absolute;
            top: 20%;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 96%;
            img {
                width: 100%;
            }
        }
        .yao_text {
            position: absolute;
            top: 3%;
            left: r(20px);
            width: r(480px);
            img {
                width: 100%;
            }
        }
        .flow_right {
            position: absolute;
            top: 20%;
            right: r(30px);
            width: r(170px);
            z-index: 2;
            img {
                width: 100%;
            }
        }
    }
    //适配中小型手机
    @media screen and(min-height:416px) and (max-height:503px) {
        //老歌适配开始
        .old_music {
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            height: 100%;
            background: url(../img/music/classics_background.png) no-repeat;
            background-size: 100% 100%;
            .old_man {
                position: absolute;
                top: r(60px);
                left: 0;
                right: 0;
                margin: 0 auto;
                width: r(460px);
                height: r(580px);
                z-index: 2;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .light {
                position: absolute;
                top: 0;
                right: 0;
                width: r(300px);
                height: r(140px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .flower {
                position: absolute;
                top: r(380px);
                left: 0;
                right: 0;
                margin: 0 auto;
                width: r(510px);
                height: r(220px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        //流行歌曲适配
        .popular_music {
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            height: 100%;
            background: url(../img/music/fashion_background.png) no-repeat center;
            background-size: 100% 100%;
            .woman_talk {
                position: absolute;
                top: r(50px);
                left: r(10px);
                width: r(320px);
                height: r(240px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .flower_man {
                position: absolute;
                left: r(10px);
                top: r(320px);
                width: r(530px);
                height: r(340px);
                z-index: 2;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .beach_woman {
                position: absolute;
                right: 0;
                top: r(130px);
                width: r(300px);
                height: r(500px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        //摇滚音乐适配开始
        .rock_music {
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            height: 100%;
            background: url(../img/bg.jpg) no-repeat center;
            background-size: 100% 100%;
            .light {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                margin: 0 auto;
                width: r(520px);
                height: r(180px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .diban {
                position: absolute;
                top: 54%;
                left: 0;
                right: 0;
                margin: 0 auto;
                width: 100%;
                height: r(140px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .singer {
                position: absolute;
                top: r(130px);
                left: 0;
                right: 0;
                margin: 0 auto;
                width: r(400px);
                height: r(540px);
                z-index: 2;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .audience_left {
                position: absolute;
                left: 0;
                top: 30%;
                width: r(320px);
                height: r(340px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .audience_right {
                position: absolute;
                right: 0;
                top: 30%;
                width: r(310px);
                height: r(320px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .audlf_talk {
                position: absolute;
                left: 0;
                top: 26%;
                width: r(150px);
                height: r(150px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .audrg_talk {
                position: absolute;
                right: 0;
                top: 24%;
                width: r(200px);
                height: r(180px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        //选项操作适配开始
        .music_order {
            position: absolute;
            bottom: r(100px);
            left: 0;
            right: 0;
            margin: 0 auto;
            width: r(660px);
            height: r(300px);
            z-index: 2;
            //选项
            .item {
                width: r(500px);
                height: r(110px);
                line-height: r(100px);
                margin-bottom: r(20px);
                padding-left: 10%;
                button {
                    width: 100%;
                    height: 100%;
                    background: none;
                    outline: none;
                    text-align: center;
                    font-size: r(38px);
                }
            }
            .item_a {
                background: url(../img/music/optionA.png) no-repeat left;
                background-size: 100% 100%;
            }
            .item_b {
                background: url(../img/music/optionB.png) no-repeat left;
                background-size: 100% 100%;
            }
            .item_c {
                background: url(../img/music/optionC.png) no-repeat left;
                background-size: 100% 100%;
            }
            //游戏时间
            .music_time {
                position: absolute;
                right: r(-10px);
                top: r(-30px);
                width: r(135px);
                height: r(140px);
                background: url(../img/music/time.png) no-repeat;
                background-size: 100% 100%;
                text-align: center;
                line-height: r(140px);
                font-size: r(30px);
            }
            //下一首歌
            .next_music {
                position: absolute;
                top: 40%;
                right: 0;
                width: r(88px);
                height: r(230px);
                line-height: r(32px);
                text-align: center;
                font-size: r(30px);
                font-weight: bold;
                background: url(../img/music/next_music.png) no-repeat;
                background-size: 100% 100%;
            }
        }
        //电影金曲开始
        .movie_music {
            position: absolute;
            top: 0;
            left: 100%;
            width: 100%;
            height: 100%;
            background: url(../img/music/classics_background.png) no-repeat;
            background-size: 100% 100%;
            .man_woman {
                position: absolute;
                top: r(220px);
                left: 0;
                right: 0;
                margin: 0 auto;
                width: r(700px);
                height: r(575px);
                z-index: 2;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .wall {
                position: absolute;
                top: 56%;
                left: 0;
                width: 100%;
                height: r(100px);
                img {
                    width: 100%;
                }
            }
            .zixia_talk {
                position: absolute;
                top: r(66px);
                left: r(5px);
                width: r(650px);
                height: r(220px);
                img {
                    width: 100%;
                }
            }
        }
    }
}